import { memo, useState, useEffect } from "react";
import styles from "./details.module.scss";
import { details, comment } from "../../Api";
import pic from "../../image/train.png";
import { Slider } from "antd-mobile";
import Expoert from "../../components/expert/Expert";
import Accept from "../accept/Accept";
let Details: React.FC<{ id: string }> = ({ id }) => {
  let [l, setL] = useState<Obj>({});
  let [review, setReview] = useState<Obj[]>([]);
  let data = async () => {
    let { data } = await details(id!);

    let { data: dat } = await comment(id);
    console.log(dat);
    setL({ ...data.data, ...l });
    setReview((val) => [...val, ...dat.data.list]);
  };
  let show = Object.keys(l).length > 0;

  useEffect(() => {
    data();
  }, []);
  return (
    <>
      <div className={styles.tex}>
        <div className={styles.tou}>
          {Object.keys(l).length > 0 && l.audio_list.length > 0 && (
            <div className={styles.icon}>
              <i className="iconfont icon-bofang"></i>
            </div>
          )}
          <img src={l.goods_img} alt="" />
          <div className={styles.texts}>
            <h3>{l.goods_name}</h3>
            <div className={styles.mold}>
              {Object.keys(l).length > 0 &&
                l.label_list.map((item: Obj) => <span key={item.id}>{item.label_name}</span>)}
            </div>
            <p>
              <span>作者</span>
              <span>{l.author}</span>
            </p>
            <p>
              <span>出版社</span>
              <span>{l.press_name}</span>
            </p>
            <button
              onClick={() => {
                location.href = l.other_buy_link;
              }}>
              购买实体绘本
            </button>
          </div>
        </div>
        <div className={styles.evaluate}>
          <img src={pic} alt="" />
          <ul className={styles.grade}>
            {Object.keys(l).length > 0 &&
              l.goods_ability_list.map((item: Obj) => (
                <li key={item.id}>
                  {item.title}
                  <Slider defaultValue={Number(item.score)} max={5} disabled className={styles.s} />
                  <span>{item.score}</span>
                </li>
              ))}
          </ul>
        </div>
        <Accept data={l} />
        {l.goods_desc && (
          <div className={styles.intro}>
            <h3>简介</h3>
            <p dangerouslySetInnerHTML={{ __html: l.goods_desc }}></p>
          </div>
        )}
        <Expoert l={l} show={show} />
        <div className={styles.comment}>
          <h3>我要评论</h3>
          <i className="iconfont icon-shuxie"></i>
          <input type="text" placeholder="说两句吧..." />
          <ul className={styles.com}>
            {review.map((item) => (
              <li key={item.id}>
                <img src={item.user_info.avatar} alt="" />
                <div className={styles.usercomment}>
                  <div className={styles.name}>
                    <p>{item.user_info.username}</p>
                    <span>{item.user_info.birthday_title}</span>
                  </div>
                  <p>{item.message}</p>
                  <div className={styles.time}>
                    <p>{item.show_time}</p>
                    <span>回复</span>
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </>
  );
};
export default memo(Details);
